<template>
  <div class="main" ref="main" >折线</div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "LineEchart",
  props:['data'],
  data(){
    return {
      //将echart变成一个全局对象
      chart:null,
    }},
  mounted () {
    this.chart=echarts.init(this.$refs.main)
    this.chart.setOption({
      xAxis:{
        type:'category',
        show:false,
      },
      yAxis:{
        show:false,
        min:0,
      },
      tooltip:{},
      // 布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
      series:[
        {
          type:'line',
          // data: [5, 20, 25, 10, 10, 20,12,4,13,21],
          data:this.data,
          smooth:true,
          lineStyle:{
            color:'#29d',
          },
          itemStyle:{
            opacity:0,
          },
          areaStyle:{
            color:{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#29d' // 0% 处的颜色
              }, {
                offset: 1, color: '#ccc' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
        }
      ],
    })
  },
  watch:{
    data(){
        this.chart.setOption({
          series:[{data:this.data,}]
        })
    }
  }
}
</script>

<style scoped>
.main{
  width: 100%;
  height: 50px;
}
</style>

